@import "header.html"
<link rel="stylesheet" href="../css/share_discounts.css">

<body>
    <header class="fxj-header">
        <back></back>
        <h1 class="fxj-title">分享优惠</h1>
    </header>
    <main id="main">
        <div id="canvas-container">
            <canvas id="canvas"></canvas>
            <div class="des title">为出行计划攒住宿基金</div>
            <div class="des">每成功邀请1位朋友注册,你们均可得200元</div>
            <div id="coupon">
                <div id="couponBorder">
                    <span id="symbol">¥</span>
                    <span id="money">200</span>
                </div>
            </div>
        </div>
        <section id="content">
            <div id="alterBtn" onclick="alterInvitationCode()">我的专属邀请码
                <svg class="icon">
                    <use xlink:href="#icon-dianping1"></use>
                </svg>
            </div>
            <div id="invitationCode" v-text="invitationCode"></div>
            <button id="shareBtn" onclick="vm.shareBoxShow=true;">分享邀请</button>
            <div id="succeedPeopleNumber">您已成功邀请了{{userList.length}}位朋友注册</div>
            <ul id="succeedList">
                <li class="succeed__item" v-for="user of userList">
                    <img class="item__img" :src="user.photo">
                    <div class="item__right">
                        <div class="item__right__content item__right__top">
                            <span class="username">{{user.nickname}}</span>
                            <span class="item__money">{{user.amount}}元住宿基金</span>
                        </div>
                        <div class="item__right__content item__right__bottom">
                            <span class="item__reason">受邀注册分享家</span>
                            <data :value="user.creat_time">{{user.creat_time}}</data>
                        </div>
                    </div>
                </li>
            </ul>
        </section>

        <div id="share-container" onclick="vm.shareBoxShow=false;" v-show="shareBoxShow">
            <div id="share-content">
                <div class="share-item" @click.stop.capture="shareQQ('QZone')">
                    <svg class="icon">
                        <use xlink:href="#icon-qqkongjian2-copy"></use>
                    </svg>
                    <span>QQ空间</span>
                </div>
                <div class="share-item" @click.stop.capture="shareQQ('QFriend')">
                    <svg class="icon">
                        <use xlink:href="#icon-QQ"></use>
                    </svg>
                    <span>QQ好友</span>
                </div>
                <div class="share-item" @click.stop.capture="shareWX('session')">
                    <svg class="icon">
                        <use xlink:href="#icon-weixinhaoyou"></use>
                    </svg>
                    <span>微信好友</span>
                </div>
                <div class="share-item" @click.stop.capture="shareWX('timeline')">
                    <svg class="icon">
                        <use xlink:href="#icon-pengyouquan"></use>
                    </svg>
                    <span>朋友圈</span>
                </div>
                <div class="share-item" @click.stop.capture="shareWeiBo()">
                    <svg class="icon">
                        <use xlink:href="#icon-weibo1"></use>
                    </svg>
                    <span>微博</span>
                </div>
            </div>
        </div>

    </main>
    @import "js.html"
    <script src="../script/share_discounts.js"></script>
</body>

@import "footer.html"